<template>
   <qf-Table :tableData="tableData" :columns="columns" align="center" :tableLoading="tableLoading">
        <!-- 头像显示 -->
        <template v-slot:imageUrl="{row}">
            <img :src="row.imageUrl" width="100">
        </template>
        <!-- 按钮 -->
        <template v-slot:action="{row}">
            <el-button type="success" @click="goPreOrder(row)">
                <!-- 自定义图标 -->
                <template v-slot:icon>
                    <i class="iconfont icon-vip3"></i>
                </template>
                <!-- 自定义语法 -->
                <template #default>
                    点击充值
                </template>
            </el-button>
        </template>
   </qf-Table>
</template>
<script setup>
import qfTable from "@/components/qfTable/index.vue"
// 引入发送请求的方法
import * as api from "@/api/pay"
import {ref} from "vue"
import { ElMessage,ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router"
let router = useRouter()
// 动态定义表头
let columns =[
    {
        label:"产品图片",
        prop:"imageUrl",
    },
    {
        label:"产品名称",
        prop:"productName"
    },
    {
        label:"产品描述",
        prop:"description"
    },
    {
        label:"产品价格",
        prop:"price"
    },
    {
        label:"库存",
        prop:"inventory"
    },
    {
        label:"充值",
        prop:"action"
    }
]
// 声明一个数据，用于注入给表格
let tableData = ref([])
// 声明控制加载动画的变量
let tableLoading = ref([])
// 获取产品
let getList = async()=>{
    // 开启加载动画
    tableLoading.value=true;
    try{
        let res = await api.getCategoryApi()
        // console.log(res);
        tableData.value = res.data.data.reverse()
        // console.log(tableData.value);
        // 关闭加载动画
        tableLoading.value=false;
    }catch(e){
        console.log(e);
        // 关闭加载动画
        tableLoading.value=false;
    }
}
getList()
// 跳转到下单页面
let goPreOrder= (row) =>{
    // console.log(row);
    // 使用弹框提示用户，是否购买
    ElMessageBox.confirm('你正在购买'+row.productName+',是否继续?','购买提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:"warning"
    })
    .then(()=>{
        // 2.用户点击了确定
        // 直接获取当前产品的id,传递给下一个页面，然后跳转到预支付页面
        router.push({path:"/preorder",query:{product_id:row.product_id}})
    })
    .catch(()=>{
        ElMessage({
            type:'warning',
            message:"已取消购买"
        })
    })
}
</script>
<script>
export default {
    meta: {
        title: 'vipCharge', 
        name: 'vip充值',
         routeName: "charge",
         icon:"#icon-chongzhi"
    }
}
</script>